<template>
  <div>
    <TablePart :table="contestList"></TablePart>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import TablePart from "./TablePart";
import { IViewTable } from "_i";
import { Get } from "../api";
import { unifyDateFromat } from "../libs/tools";
let that = {};
export default {
  name: "ContestListPart",
  components: { TablePart },
  props: {
    filterAnd: {
      //过滤条件与
      type: Array,
      default: () => []
    },
    filterOr: {
      //过滤条件或
      type: Array,
      default: () => []
    },
    orderBy: {
      //排序规则
      type: Object,
      default: () => ({
        field: "contest_id",
        mode: "DESC"
      })
    },
    page: {
      type: Object,
      default: () => ({
        page_num: 1, //页码
        page_size: 10, //页的大小
        page_total: 10 //总页数
      })
    },
    funs: {
      type: Object
    }
  },
  data() {
    return {
      contestList: new IViewTable(
        [
          {
            title: "#",
            width: 30,
            key: "contest_id"
          },
          {
            type: "link",
            title: "竞赛名称",
            key: "title",
            onClick: e => {
              this.$router.push({ name: "ContestCentent", params:e });
            }
          },
          {
            title: "描述",
            key: "description",
            width: 70
          },
          {
            title: "开始时间",
            key: "start_time",
            width: 70
          },
          {
            title: "结束时间",
            key: "end_time",
            width: 70
          },
          {
            title: "状态",
            width: 40,
            key: "status",
            type: "tag",
            colors: { 未开始: "warning", 进行中: "success", 已结束: "#ddd" }
          }
        ],
        []
      ),
      spinShow: false
    };
  },
  methods: {
    async update() {
      //更新函数
      this.spinShow = true;
      let { filterAnd, filterOr, orderBy, page } = this.$props;
      let res = await Get.getContestList({
        filterAnd,
        filterOr,
        orderBy,
        ...page
      });
      // console.log(res);
      this.page.page_total = res.page_total;
      this.contestList.data = res.data;
      this.spinShow = false;
    }
  },
  async created() {
    that = this;
    this.funs.update = () => {
      this.update();
    };
    setInterval(() => {
      this.contestList.data = this.contestList.data.map(item => {
        let now = unifyDateFromat();
        let status = "未开始";
        if (item.start_time <= now) {
          status = "进行中";
        }
        if (item.end_time < now) {
          status = "已结束";
        }
        return {
          ...item,
          status
        };
      });
    }, 1000);
  }
};
</script>

<style lang="less" scoped>

</style>